<template>
	<view class="detail-wrap">
		<DetailHeader title="议案动态详情"></DetailHeader>
		<view class="form-searh">
			<view class="item">
				<view class="label">
					议案标题
				</view>
				<view class="content">
					<uni-easyinput class="input" prefixIcon="search" v-model="form.title" placeholder="请输入议案标题进行搜索"
						@iconClick="iconClick">
					</uni-easyinput>
					<button type="warn">搜索</button>
				</view>
			</view>


			<view class="item">
				<view class="label">
					代表姓名
				</view>
				<view class="content">
					<uni-easyinput class="input" prefixIcon="search" v-model="form.title" placeholder="请输入代表姓名进行搜索"
						@iconClick="iconClick">
					</uni-easyinput>
					<button type="warn">搜索</button>
				</view>
			</view>
		</view>
		<view class="table">
			<c-table :headerData="headerData" :tableData="tableData">
				<template v-slot:unitName="{data}">
					<view class="font unitName">
						{{data.unitName}}
					</view>
				</template>
				<template v-slot:controls="{data}">
					<view class="font controls" @click="lookView">
						{{data.controls}}
					</view>
				</template>
			</c-table>
		</view>
	</view>
</template>

<script>
	import DetailHeader from '@/components/nacigation/DetailHeader.vue';
	import cTable from '@/components/cTable/cTable.vue'
	export default {
		components: {
			DetailHeader,
			"c-table": cTable
		},
		data() {
			return {
				form: {
					title: ''
				},
				headerData: [{
						width: 30,
						align: 'left',
						name: '议案名称',
						value: 'unitName',
						solt: 'unitName'
					},
					{
						width: 20,
						align: 'left',
						name: '操作',
						value: 'controls',
						solt: 'controls'
					},

				],
				tableData: [{
						unitName: '张三领衔提出“关于增加养老福利的建议',
						controls: '查看详情'
					},
					{
						unitName: '张三领衔提出“关于增加养老福利的建议...张三领衔提出“关于增加养老福利的建议...',
						controls: '查看详情'
					},
				],
			}
		},
		methods: {
			iconClick() {}
		}
	};
</script>

<style scoped lang="scss">
	.detail-wrap {
		.form-searh {
			border-bottom: 20rpx solid #EDEDED;
			padding: 14rpx 30rpx 30rpx;

			.item {
				display: flex;
				flex-direction: column;

				.label {
					margin-top: 16rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.content {
					margin-top: 16rpx;
					display: flex;
					flex-direction: row;

					.input {
						width: 556rpx;
						height: 72rpx;
						background: #FFFFFF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 4rpx solid #F2F2F2;
					}

					button {
						margin-left: 10rpx;
						width: 124rpx;
						height: 68rpx;
						background: linear-gradient(135deg, #DF2F2F 0%, #FF8180 100%);
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 68rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}

		.table {
			padding: 30rpx;

			.font {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				font-style: normal;
				text-transform: none;
			}

			.unitName {
				width: 362rpx;
				color: #000000;
				overflow: hidden;
				text-overflow: ellipsis;
				/* 超出部分显示为省略号 */
				white-space: nowrap;
				/* 保持内容在一行显示，如果需要多行，可以移除这行 */
			}

			.statistics {
				width: 100rpx;
				color: #2A8BFD;
			}

			.controls {
				width: 100rpx;
				color: #2A8BFD;
			}
		}
	}
</style>